<template>
	<view>
		<uni-search-bar placeholder="请搜索内容" @confirm="handleConfirm"></uni-search-bar>
		<view class="oo">

			<view class="search-list">
				<view class="item" v-for="(item, index) in list" :key="index">{{item}}</view>
			</view>
			<view class="">
				<button type="warn" size="mini" style="width: 100px;" @click="list = []">清空</button>
			</view>
		</view>
		<!-- 渲染历史记录 -->
		<!-- 1. 数据模拟 -->
		<view class="list">
			<view class="list-item" v-for="item in searchListData" :key="item.id">
				<image :src="item.image" mode=""></image>
				<view class="right">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
			</view>
		</view>
		<!-- 2. 数据请求 -->
		<!-- 	2-1 搜索 -->
		<!-- 	2-2 历史记录 -->
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	const searchListData = ref([])
	const list = ref(uni.getStorageSync('list') || [])
	watch(list, () => {
		uni.setStorageSync('list', list.value)
	})
	const handleConfirm = ({
		value
	} = {
		value: ''
	}) => {
		// 1. 保存历史记录
		//  1-1 去除 重复项目
		//  1-2 最近的放在前面
		list.value = [...new Set([value, ...list.value])]

		// 2. 请求数据

		uni.request({
			url: 'http://localhost:3000/list',
			data: {
				q: value
			}
		}).then(resp => {
			console.log(resp.data)
			searchListData.value = resp.data
		})
	}

	handleConfirm()
</script>

<style lang="scss">
	.list-item {
		display: flex;

		image {
			width: 300rpx;
			height: 300rpx;
			flex-shrink: 0;
		}
	}

	.oo {
		display: flex;
		justify-content: space-between;
	}

	.search-list {
		display: flex;
		width: 100vw;

		.item {
			margin: 10rpx;
		}
	}
</style>